<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>迁移任务</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="assets/libs/layui/css/layui.css">
    <link rel="stylesheet" href="assets/css/scroll-bar.css">
    <link rel="stylesheet" href="assets/css/sub-page.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_693759_hsptnwurztv.css">
</head>
<body>
<div class="ok-body">
    <!--面包屑导航区域-->
    <div class="ok-body-breadcrumb">
            <span class="layui-breadcrumb">
                <a><cite>首页</cite></a>
                <a><cite>数据迁移</cite></a>
                <a><cite>迁移任务</cite></a>
            </span>
        <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon layui-icon-refresh"></i>
        </a>
    </div>

    <script type="text/html" id="db-toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add"><i
                    class="layui-icon">&#xe654;</i>添加
            </button>
        </div>
    </script>
    <!--数据表格-->
    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>

    <script type="text/html" id="task-table-bar">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="run">运行</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="mask">脱敏</a>
    </script>

</div>
<!--js逻辑-->
<script src="assets/libs/layui/layui.js"></script>
<script>
    layui.config({
        base: 'module/',
        version: true,
        debug: true
    }).use(['element','table', 'config', 'crown'], function () {
        var config = layui.config;
        var table = layui.table;
        var crown = layui.crown;
        var $ = layui.jquery;

        var taskTable = table.render({
            elem: '#tableId',
            toolbar: '#db-toolbar',
            url: '/tasks',
            request: config.request,
            parseData: config.parseData,
            response: config.response,
            page: true,
            cols: [[
                {field: 'taskName', align: 'center', sort: true, title: '任务名'},
                {field: 'sourceName', align: 'center', sort: true, title: '源'},
                {field: 'sourceDb', align: 'center', sort: true, title: '源库'},
                {field: 'targetName', align: 'center', sort: true, title: '目标'},
                {field: 'targetDb', align: 'center', sort: true, title: '目标库'},
                {field: 'tables', align: 'center', sort: true, title: '同步表', width:80},
                {field: 'status', align: 'center', sort: true, title: '状态',width:80},
                {field: 'runTime', align: 'center', sort: true, title: '耗时(秒)', width:100},
                {align: 'center', toolbar: '#task-table-bar', title: '操作'}
            ]]
        });

        table.on('tool(tableFilter)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if(layEvent === 'detail'){
                location.href = 'migration_list.html?taskId='+data.id;
            }else if(layEvent === 'run'){
                crown.post('/task/run/'+data.id, {},function(resp){
                    console.log(resp);
                });
            }else if(layEvent === 'mask'){
                location.href = 'data_mask.html?taskId='+data.id;
            }
        });

        table.on('toolbar(tableFilter)', function (obj) {
            if (obj.event === 'add') {
                crown.popupCenter({
                    title:  '添加任务',
                    area: ["80%", "85%"],
                    path: 'pages/task-form.html',
                    finish: function () {
                        taskTable.reload();
                    }
                });
            }
        });

    })
</script>

</body>
</html>